<!doctype html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>阿里云产品首页</title>
		<link rel="stylesheet" href="bgAll/css/common.css" type="text/css" />
		<link rel="stylesheet" href="css/index.css" type="text/css" />
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/default.css">
		<link rel="stylesheet" href="bgAll/css/fakeLoader.css" type="text/css" />
		<style type="text/css">
			.fakeloader {
				position: fixed;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				z-index: 999;
				background: url("../bgAll/img/bg.png")
			}
			
			#nav {
				position: absolute;
				margin-top: 10px;
				text-align: center;
				width: 100%;
				top: 40%
			}
			
			#nav>span {
				display: inline-block;
				width: 50px;
				height: 90px;
				font: bold 16px arial;
				text-align: center;
				margin: 5px;
				color: #6d8099;
				background: rgba(150, 150, 150, 0.1);
				border: solid 2px rgba(0, 0, 0, 0.4);
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				-webkit-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4);
				-moz-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4);
				box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4);
				cursor: pointer;
				line-height: 90px;
				font-size: 34px
			}
			
			#nav>span:active,
			#nav>span.down {
				background: rgba(150, 150, 150, 0);
				border: solid 2px rgba(0, 0, 0, 0.6);
				box-shadow: none
			}
		</style>
		<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
	</head>

	<body class="wrap">
		<div class="fakeloader"></div>
		<div class="mod-star-list">
			<div class="inner"></div>
		</div>
		<a class="LogoutBox" href="login.html">
			<div class="LogoutBg rotate3"></div>
			<div class="Logout"></div>
		</a>
		<div class="showTips">
			<div id="tips1">
				MQ帮您实现分布式计算场景中所有异步解耦功能，是专业、可靠的企业级消息中间件产品。
				<label class="cover1"></label>
				<label class="cover2"></label>
			</div>
			<div id="tips2">
				EDAS帮助企业级客户轻松构建并托管分布式应用服务体系，十年技术精华之沉淀，此刻与世界分享。
				<label class="cover1"></label>
				<label class="cover2"></label>
			</div>
			<div id="tips3">
				DRDS自动化水平拆分，在线平滑扩缩容，服务能力线性扩展，透明读写分离，数据库全生命周期运维管控。
				<label class="cover1"></label>
				<label class="cover2"></label>
			</div>
			<div id="tips4">
				解决方案，各种解决方案
				<label class="cover1"></label>
				<label class="cover2"></label>
			</div>
		</div>
		<div class="wrapBox">
			<div style="height:50px"></div>
			<div id="showcase" style="overflow: scroll;" class="noselect">
				<lable></lable>
				<img id="goods0" class="cloud9-item" src="img/MQ.png">
				<img id="goods1" class="cloud9-item" src="img/EDAS.png">
				<img id="goods2" class="cloud9-item" src="img/DRDS.png">
				<img id="goods3" class="cloud9-item" src="img/DRDS.png">
			</div>
		</div>
		<div id="nav" class="noselect">
			<span class="left fl">
        &lt;
      </span>
			<span class="right fr">
        &gt;
      </span>
		</div>
		<script type="text/javascript" src='bgAll/js/jquery-1.11.1.min.js'></script>
		<script>
			window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')
		</script>
		<script src="bgAll/js/fakeLoader.min.js"></script>
		<script type="text/javascript" src='bgAll/js/common.js'></script>
		<script src="js/jquery.cloud9carousel.js"></script>
		<script src="js/jquery.reflection.js"></script>
		<script>
			$(function() {
				var showcase = $("#showcase"),
					title = $("#item-title");
				showcase.Cloud9Carousel({
					yOrigin: 12,
					yRadius: 200,
					speed: 10,
					buttonLeft: $("#nav > .left"),
					buttonRight: $("#nav > .right"),
					autoPlay: 1,
					bringToFront: true,
					onRendered: rendered,
					onLoaded: function() {
						showcase.css("visibility", "visible");
						showcase.css("display", "none");
						showcase.fadeIn(1500)
					},
					rendered: function(carousel) {
						var item = $(carousel).data("carousel");
						$(carousel).data("carousel").go(3)
					}
				});

				function rendered(carousel) {
					title.text(carousel.nearestItem().element.alt);
					_ID = carousel.nearestItem().element.id;
					console.info(_ID);
					showTips(_ID);
					var c = Math.cos((carousel.floatIndex() % 1) * 2 * Math.PI);
					title.css("opacity", 0.5 + (0.5 * c))
				}
				$("#nav > button").click(function(e) {
					var b = $(e.target).addClass("down");
					setTimeout(function() {
						b.removeClass("down")
					}, 80)
				});
				$(document).keydown(function(e) {
					switch (e.keyCode) {
						case 37:
							$("#nav > .left").click();
							break;
						case 39:
							$("#nav > .right").click()
					}
				});
				$(".cloud9-item").on("click tap", function(i, e) {
					_id = $(this).attr("id");
					_href = getNum(_id) - 1;
					console.info(_id + "  " + _href);
					switch (_href) {
						case 0:
							window.location.href = "MQ/index.html";
							break;
						case 1:
							window.location.href = "EDAS/index.html";
							break;
						case 2:
							window.location.href = "DRDS/index.html";
							break;
						case 3:
							window.location.href = "SOLUTION/index.html";
							break;
						default:
							window.location.href = "###"
					}
				})
			});

			function getNum(text) {
				return parseInt(text.replace(/[^0-9]/ig, "")) + 1
			}

			function showTips(id) {
				$("#" + id).css("opacity", "1").addClass("shineAction").siblings("img").removeClass("shineAction").css("opacity", "0.5");
				var _tipsId = "#tips" + getNum(id);
				console.log(_tipsId);
				$(".showTips").fadeIn();
				$(".showTips").find("div").hide();
				$(".showTips").find(_tipsId).show()
			}
			String.prototype.getQueryString = function(name) {
				var reg = new RegExp("(^|&|\\?)" + name + "=([^&]*)(&|$)"),
					r;
				if (r = this.match(reg)) {
					return unescape(r[2])
				}
				return null
			};
			var url = window.location.href;
			var _para = url.getQueryString("goods");
			$("#" + _para).insertBefore("lable");
		</script>
		<script type="text/javascript" src='bgAll/js/waypoints.js'></script>
		<script type="text/javascript" src='bgAll/js/star.js'></script>
	</body>
</html>